<template>
    <div class="rescue-container">
      <el-card class="page-card" shadow="hover">
        <div class="header">
          <div class="header-content">
            <h2 class="page-title">
              <el-icon><Document /></el-icon>
              <span>我的救助记录</span>
            </h2>
            <div class="subtitle">管理您的动物救助记录</div>
          </div>
          <el-button type="primary" size="large" @click="openAddDialog">
            <el-icon><Plus /></el-icon>
            上报救助
          </el-button>
        </div>

        <!-- 筛选区域 -->
        <div class="filter-section">
          <el-row :gutter="16">
            <el-col :span="6">
              <el-input
                v-model="filters.keyword"
                placeholder="搜索编号、描述、地点"
                clearable
                @clear="handleFilter"
                @keyup.enter="handleFilter"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </el-col>
            <el-col :span="4">
              <el-select
                v-model="filters.animalType"
                placeholder="动物类型"
                clearable
                @change="handleFilter"
              >
                <el-option
                  v-for="type in animalTypes"
                  :key="type"
                  :label="type"
                  :value="type"
                />
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select
                v-model="filters.status"
                placeholder="状态"
                clearable
                @change="handleFilter"
              >
                <el-option label="待审核" :value="0" />
                <el-option label="进行中" :value="1" />
                <el-option label="已完成" :value="2" />
                <el-option label=" 驳回" :value="3" />
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="handleFilter" :icon="Search">
                筛选
              </el-button>
              <el-button @click="handleReset" :icon="Refresh">
                重置
              </el-button>
            </el-col>
          </el-row>
        </div>
  
        <el-table :data="filteredList" border stripe style="width: 100%" class="rescue-table">
          <el-table-column prop="rescueCode" label="编号" width="150" align="center">
            <template #default="{ row }">
              <span class="code-text">{{ row.rescueCode || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="animalType" label="动物类型" width="120" align="center">
            <template #default="{ row }">
              <el-tag type="info" size="small">{{ row.animalType || '-' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="描述" min-width="200">
            <template #default="{ row }">
              <div class="description-cell">
                {{ row.description || '暂无描述' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="location" label="地点" width="160">
            <template #default="{ row }">
              <div class="location-cell">
                <el-icon><Location /></el-icon>
                <span>{{ row.location || '-' }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="图片" width="140" align="center">
            <template #default="{ row }">
              <div class="image-gallery">
                <div 
                  v-if="getPhotos(row).length > 0" 
                  class="image-preview"
                  @click="previewImages(row)"
                >
                  <el-image
                    :src="getPhotos(row)[0]"
                    fit="cover"
                    class="preview-img"
                  />
                  <div v-if="getPhotos(row).length > 1" class="image-count">
                    <el-icon><Picture /></el-icon>
                    <span>+{{ getPhotos(row).length - 1 }}</span>
                  </div>
                </div>
                <span v-else class="no-image">暂无图片</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="110" align="center">
            <template #default="{ row }">
              <el-tag 
                v-if="row.status === 0" 
                type="warning"
                effect="dark"
              >
                待审核
              </el-tag>
              <el-tag 
                v-else-if="row.status === 1" 
                type="info"
                effect="dark"
              >
                进行中 
              </el-tag>
              <el-tag 
                v-else-if="row.status === 2" 
                type="success"
                effect="dark"
              >
                已完成
              </el-tag>
              <el-tag 
                v-else 
                type="danger"
                effect="dark"
              >
                驳回
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="rejectReason" label="驳回原因" min-width="200" show-overflow-tooltip>
            <template #default="{ row }">
              <span v-if="row.rejectReason" :title="row.rejectReason" class="reject-reason">
                {{ row.rejectReason }}
              </span>
              <span v-else style="color: #909399;">-</span>
            </template>
          </el-table-column>
          <el-table-column prop="reportTime" label="上报时间" width="180" align="center">
            <template #default="{ row }">
              <div class="time-cell">
                <el-icon><Clock /></el-icon>
                <span>{{ formatTime(row.reportTime) }}</span>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="180" align="center" fixed="right">
            <template #default="{ row }">
              <div class="action-buttons">
                <!-- 待审核状态：可以编辑和删除 -->
                <template v-if="row.status === 0">
                  <el-button 
                    size="small" 
                    type="primary" 
                    @click="openEditDialog(row)"
                    :icon="Edit"
                  >
                    编辑
                  </el-button>
                  <el-button 
                    size="small" 
                    type="danger" 
                    @click="deleteRecord(row.id)"
                    :icon="Delete"
                  >
                    删除
                  </el-button>
                </template>
                <!-- 进行中状态：不允许编辑和删除 -->
                <template v-else-if="row.status === 1">
                  <span style="color: #909399; font-size: 13px;">处理中，无法操作</span>
                </template>
                <!-- 已完成状态：只能删除，不能编辑 -->
                <template v-else-if="row.status === 2">
                  <el-button 
                    size="small" 
                    type="danger" 
                    @click="deleteRecord(row.id)"
                    :icon="Delete"
                  >
                    删除
                  </el-button>
                </template>
                <!-- 驳回状态：只能删除，不能编辑 -->
                <template v-else-if="row.status === 3">
                  <el-button 
                    size="small" 
                    type="danger" 
                    @click="deleteRecord(row.id)"
                    :icon="Delete"
                  >
                    删除
                  </el-button>
                </template>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 空状态 -->
        <el-empty 
          v-if="filteredList.length === 0 && originalList.length === 0" 
          description="暂无救助记录" 
          :image-size="150" 
        />
        <el-empty 
          v-else-if="filteredList.length === 0" 
          description="没有找到符合条件的记录" 
          :image-size="150" 
        />
      </el-card>
  
      <!-- 新增 / 编辑弹窗 -->
      <el-dialog 
        v-model="dialogVisible" 
        :title="isEdit ? '编辑救助信息' : '上报救助'" 
        width="600px"
        class="rescue-dialog"
      >
        <el-form :model="form" label-width="100px" :rules="formRules" ref="formRef">
          <el-form-item label="动物类型" prop="animalType">
            <el-input 
              v-model="form.animalType" 
              placeholder="请输入动物类型，如：猫、狗、鸟等" 
              clearable
            />
          </el-form-item>
  
          <el-form-item label="描述" prop="description">
            <el-input 
              type="textarea" 
              v-model="form.description" 
              :rows="4"
              placeholder="请详细描述动物的状况、发现情况等信息"
              maxlength="500"
              show-word-limit
            />
          </el-form-item>
  
          <el-form-item label="地点" prop="location">
            <el-input 
              v-model="form.location" 
              placeholder="请输入发现地点，如：XX街道XX号" 
              clearable
            >
              <template #prefix>
                <el-icon><Location /></el-icon>
              </template>
            </el-input>
          </el-form-item>
  
          <el-form-item label="上传照片" prop="photos">
            <el-upload
              class="upload-list"
              action="http://localhost:8080/api/rescue/uploadPhoto"
              :on-success="handleUploadSuccess"
              :on-remove="handleRemove"
              :on-preview="handlePreview"
              :file-list="fileList"
              list-type="picture-card"
              :limit="9"
              accept="image/*"
            >
              <el-icon><Plus /></el-icon>
              <template #tip>
                <div class="upload-tip">支持上传多张图片，最多9张（每张不超过5MB）</div>
              </template>
            </el-upload>
          </el-form-item>
        </el-form>
  
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false" size="large">取消</el-button>
            <el-button type="primary" @click="saveRescue" size="large">
              <el-icon><Check /></el-icon>
              保存
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 图片预览对话框 -->
      <el-dialog 
        v-model="previewVisible" 
        title="图片预览" 
        width="90%"
        class="preview-dialog"
        @closed="handlePreviewClosed"
      >
        <div class="preview-container">
          <!-- 工具栏 -->
          <div class="preview-toolbar">
            <div class="toolbar-left">
              <el-button-group>
                <el-button @click="zoomOut" :icon="ZoomOut" :disabled="zoomScale <= 0.5" title="缩小">
                  缩小
                </el-button>
                <el-button @click="resetZoom" title="重置">
                  {{ Math.round(zoomScale * 100) }}%
                </el-button>
                <el-button @click="zoomIn" :icon="ZoomIn" :disabled="zoomScale >= 3" title="放大">
                  放大
                </el-button>
              </el-button-group>
            </div>
            <div class="toolbar-right">
              <span class="preview-counter">
                共 {{ previewList.length }} 张图片，当前第 {{ previewIndex + 1 }} 张
              </span>
            </div>
          </div>
          
          <!-- 轮播容器 -->
          <div class="carousel-wrapper">
            <el-carousel 
              v-model="previewIndex"
              height="70vh"
              indicator-position="outside"
              @change="handleCarouselChange"
            >
              <el-carousel-item v-for="(url, index) in previewList" :key="index">
                <div class="carousel-image-wrapper" @wheel.prevent="handleWheel">
                  <div 
                    class="image-zoom-container"
                    :style="{ transform: `scale(${zoomScale})` }"
                  >
                    <img 
                      :src="url" 
                      class="preview-image"
                      alt="预览图片"
                      @load="handleImageLoad"
                    />
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, computed } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { 
    Document, Plus, Location, Picture, Clock, Edit, Delete, Check, Search, Refresh,
    ZoomIn, ZoomOut
  } from '@element-plus/icons-vue';
  import axios from "axios";
  
  const userId = localStorage.getItem("userId");
  const rescueList = ref([]);
  const originalList = ref([]); // 保存原始数据
  const dialogVisible = ref(false);
  const isEdit = ref(false);
  const formRef = ref(null);
  const previewVisible = ref(false);
  const previewList = ref([]);
  const previewIndex = ref(0);
  const fileList = ref([]);
  const zoomScale = ref(1); // 图片缩放比例
  
  // 筛选条件
  const filters = ref({
    keyword: '',
    animalType: '',
    status: null
  });
  
  // 动物类型列表（从数据中提取去重）
  const animalTypes = computed(() => {
    const types = new Set();
    originalList.value.forEach(item => {
      if (item.animalType) {
        types.add(item.animalType);
      }
    });
    return Array.from(types).sort();
  });
  
  // 筛选后的列表
  const filteredList = computed(() => {
    let result = [...originalList.value];
    
    // 关键词搜索
    if (filters.value.keyword) {
      const keyword = filters.value.keyword.toLowerCase();
      result = result.filter(item => 
        (item.rescueCode && item.rescueCode.toLowerCase().includes(keyword)) ||
        (item.description && item.description.toLowerCase().includes(keyword)) ||
        (item.location && item.location.toLowerCase().includes(keyword))
      );
    }
    
    // 动物类型筛选
    if (filters.value.animalType) {
      result = result.filter(item => item.animalType === filters.value.animalType);
    }
    
    // 状态筛选
    if (filters.value.status !== null && filters.value.status !== undefined && filters.value.status !== '') {
      result = result.filter(item => item.status === filters.value.status);
    }
    
    return result;
  });
  
  // 表单验证规则
  const formRules = {
    animalType: [
      { required: true, message: '请输入动物类型', trigger: 'blur' }
    ],
    description: [
      { required: true, message: '请输入描述信息', trigger: 'blur' },
      { min: 50, message: '描述至少50个字', trigger: 'blur' }
    ],
    location: [
      { required: true, message: '请输入发现地点', trigger: 'blur' },
      { min: 10, message: ' 请输入详细地址', trigger: 'blur' }
    ]
  };
  
  const form = ref({
    id: null,
    reporterId: userId,
    animalType: "",
    description: "",
    location: "",
    photos: [], // 改为数组支持多张图片
  });
  
  // 获取图片列表（兼容旧数据）
  const getPhotos = (row) => {
    // 优先使用 photos 数组
    if (Array.isArray(row.photos)) {
      return row.photos.filter(p => p); // 过滤空值
    }
    // 如果 photo 是字符串，可能是逗号分隔的多张图片
    if (row.photo) {
      if (typeof row.photo === 'string' && row.photo.includes(',')) {
        // 逗号分隔的字符串，分割成数组
        return row.photo.split(',').map(url => url.trim()).filter(url => url);
      }
      // 单张图片或旧数据格式
      return [row.photo];
    }
    return [];
  };
  
  // 获取当前用户的救助记录
  const getMyRescueList = async () => {
    try {
      const res = await axios.get(`http://localhost:8080/api/rescue/user/${userId}`);
      if (res.data.code === 200) {
        originalList.value = res.data.data || [];
        rescueList.value = res.data.data || [];
      }
    } catch (e) {
      ElMessage.error("加载救助记录失败");
    }
  };
  
  // 时间格式化
  const formatTime = (time) => {
    if (!time) return '-';
    
    // 如果是字符串，尝试解析
    if (typeof time === 'string') {
      const date = new Date(time);
      if (isNaN(date.getTime())) {
        return time; // 如果无法解析，返回原字符串
      }
      time = date;
    }
    
    // 如果是日期对象
    if (time instanceof Date) {
      const year = time.getFullYear();
      const month = String(time.getMonth() + 1).padStart(2, '0');
      const day = String(time.getDate()).padStart(2, '0');
      const hours = String(time.getHours()).padStart(2, '0');
      const minutes = String(time.getMinutes()).padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    }
    
    return time;
  };
  
  // 筛选
  const handleFilter = () => {
    // 筛选逻辑已在 computed 中实现，这里可以添加额外的逻辑
  };
  
  // 重置筛选
  const handleReset = () => {
    filters.value = {
      keyword: '',
      animalType: '',
      status: null
    };
  };
  
  // 打开新增弹窗
  const openAddDialog = () => {
    isEdit.value = false;
    form.value = { 
      reporterId: userId, 
      animalType: "", 
      description: "", 
      location: "", 
      photos: [] 
    };
    fileList.value = [];
    dialogVisible.value = true;
  };
  
  // 打开编辑弹窗
  const openEditDialog = (row) => {
    isEdit.value = true;
    const photos = getPhotos(row);
    form.value = { 
      ...row,
      photos: photos 
    };
    // 构建文件列表用于显示
    fileList.value = photos.map((url, index) => ({
      uid: index,
      name: `image-${index}.jpg`,
      url: url,
      status: 'success'
    }));
    dialogVisible.value = true;
  };
  
  // 上传成功回调
  const handleUploadSuccess = (response, file) => {
    let url = '';
    if (typeof response === 'string') {
      url = response;
    } else if (response && response.url) {
      url = response.url;
    } else if (response && response.code === 200 && response.data) {
      url = response.data.url || response.data;
    } else if (response && response.data && response.data.url) {
      url = response.data.url;
    }
    
    if (url) {
      if (!form.value.photos) {
        form.value.photos = [];
      }
      form.value.photos.push(url);
      ElMessage.success("图片上传成功");
    } else {
      ElMessage.error("上传失败：无法获取图片URL");
    }
  };
  
  // 删除图片
  const handleRemove = (file) => {
    const url = file.url || file.response?.url || file.response?.data?.url;
    if (url && form.value.photos) {
      const index = form.value.photos.indexOf(url);
      if (index > -1) {
        form.value.photos.splice(index, 1);
      }
    }
    // 更新文件列表
    fileList.value = fileList.value.filter(item => item.uid !== file.uid);
  };
  
  // 预览图片（上传时）
  const handlePreview = (file) => {
    const url = file.url || file.response?.url || file.response?.data?.url;
    if (url && form.value.photos) {
      previewList.value = form.value.photos;
      const index = form.value.photos.indexOf(url);
      previewIndex.value = index >= 0 ? index : 0;
      zoomScale.value = 1; // 重置缩放
      previewVisible.value = true;
    }
  };
  
  // 预览表格中的图片
  const previewImages = (row) => {
    const photos = getPhotos(row);
    if (photos.length > 0) {
      previewList.value = photos;
      previewIndex.value = 0;
      zoomScale.value = 1; // 重置缩放
      previewVisible.value = true;
    }
  };
  
  // 图片缩放相关方法
  const zoomIn = () => {
    if (zoomScale.value < 3) {
      zoomScale.value = Math.min(zoomScale.value + 0.25, 3);
    }
  };
  
  const zoomOut = () => {
    if (zoomScale.value > 0.5) {
      zoomScale.value = Math.max(zoomScale.value - 0.25, 0.5);
    }
  };
  
  const resetZoom = () => {
    zoomScale.value = 1;
  };
  
  // 鼠标滚轮缩放
  const handleWheel = (event) => {
    event.preventDefault();
    if (event.deltaY < 0) {
      // 向上滚动，放大
      zoomIn();
    } else {
      // 向下滚动，缩小
      zoomOut();
    }
  };
  
  // 轮播切换时重置缩放
  const handleCarouselChange = () => {
    // 切换图片时保持当前缩放比例（可选：切换时重置缩放）
    // zoomScale.value = 1;
  };
  
  // 预览对话框关闭时重置
  const handlePreviewClosed = () => {
    previewList.value = [];
    zoomScale.value = 1;
  };
  
  // 图片加载完成处理
  const handleImageLoad = (event) => {
    // 确保图片完整显示，不裁剪
    const img = event.target;
    if (img) {
      // 图片已经通过CSS样式自动适应容器并保持比例
      // 这里可以添加额外的处理逻辑
    }
  };
  
  // 保存（新增或修改）
  const saveRescue = async () => {
    if (!formRef.value) return;
    
    await formRef.value.validate(async (valid) => {
      if (!valid) {
        ElMessage.warning("请完善表单信息");
        return;
      }
      
      try {
        // 将多张图片URL用逗号拼接成字符串（后端期望的格式）
        const photosArray = form.value.photos || [];
        const photoString = photosArray.length > 0 
          ? photosArray.join(",") 
          : '';
        
        // 准备提交数据
        const submitData = {
          ...form.value,
          photo: photoString, // 传递逗号分隔的图片URL字符串
          photos: photosArray // 同时传递数组（如果后端支持）
        };
        
        if (isEdit.value) {
          const res = await axios.put("http://localhost:8080/api/rescue/update", submitData);
          if (res.data.code === 200) {
            ElMessage.success("修改成功");
            dialogVisible.value = false;
            getMyRescueList();
          } else {
            ElMessage.error(res.data.msg || "修改失败");
          }
        } else {
          const res = await axios.post("http://localhost:8080/api/rescue/report", submitData);
          if (res.data.code === 200) {
            ElMessage.success("上报成功");
            dialogVisible.value = false;
            getMyRescueList();
          } else {
            ElMessage.error(res.data.msg || "上报失败");
          }
        }
      } catch (e) {
        ElMessage.error("请求失败：" + (e.message || "网络错误"));
      }
    });
  };
  
  // 删除记录
  const deleteRecord = (id) => {
    ElMessageBox.confirm("确认删除这条救助记录吗？删除后无法恢复。", "删除确认", {
      type: "warning",
      confirmButtonText: "确认删除",
      cancelButtonText: "取消"
    }).then(async () => {
      try {
        const res = await axios.delete(`http://localhost:8080/api/rescue/delete/${id}/${userId}`);
        if (res.data.code === 200) {
          ElMessage.success("删除成功");
          getMyRescueList();
        } else {
          ElMessage.error(res.data.msg || "删除失败");
        }
      } catch (e) {
        ElMessage.error("删除失败：" + (e.message || "网络错误"));
      }
    }).catch(() => {
      // 用户取消
    });
  };
  
  onMounted(() => {
    getMyRescueList();
  });
  </script>
  
  <style scoped>
  .rescue-container {
    padding: 20px;
    background: #f5f7fa;
    min-height: 100%;
  }
  
  .page-card {
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }
  
  :deep(.el-card__body) {
    padding: 30px;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e4e7ed;
  }
  
  .header-content {
    flex: 1;
  }
  
  .page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px 0;
    font-size: 26px;
    font-weight: 600;
    color: #303133;
  }
  
  .page-title .el-icon {
    font-size: 32px;
    color: #409eff;
  }
  
  .subtitle {
    color: #909399;
    font-size: 14px;
    margin-left: 44px;
    font-weight: 400;
  }
  
  .header .el-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-weight: 500;
    font-size: 15px;
    border-radius: 8px;
  }
  
  /* 筛选区域 */
  .filter-section {
    margin-bottom: 20px;
    padding: 20px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #ebeef5;
  }
  
  .filter-section .el-button {
    margin-left: 8px;
  }
  
  /* 表格样式优化 */
  .rescue-table {
    margin-top: 20px;
  }
  
  :deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ebeef5;
  }
  
  :deep(.el-table__header) {
    background: #fafafa;
  }
  
  :deep(.el-table__header th) {
    background: #fafafa;
    color: #303133;
    font-weight: 600;
    font-size: 15px;
    padding: 18px 0;
    border-bottom: 1px solid #ebeef5;
  }
  
  :deep(.el-table__body tr:hover > td) {
    background-color: #f0f9ff !important;
  }
  
  :deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
    background: #fafafa;
  }
  
  :deep(.el-table td) {
    padding: 18px 0;
    border-bottom: 1px solid #ebeef5;
  }
  
  :deep(.el-table--border td) {
    border-right: 1px solid #ebeef5;
  }
  
  /* 表格内容样式 */
  .code-text {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #409eff;
  }
  
  .description-cell {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #606266;
    line-height: 1.6;
  }
  
  .location-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #606266;
  }
  
  .location-cell .el-icon {
    color: #909399;
    font-size: 16px;
  }
  
  .time-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #606266;
    font-size: 14px;
  }
  
  .time-cell .el-icon {
    color: #909399;
    font-size: 16px;
  }
  
  /* 图片展示 */
  .image-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .image-preview {
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  
  .image-preview:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  .preview-img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
  }
  
  .image-count {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px 0 8px 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .no-image {
    color: #c0c4cc;
    font-size: 13px;
  }
  
  .reject-reason {
    color: #f56c6c;
    font-size: 13px;
    font-weight: 500;
  }
  
  /* 操作按钮样式 */
  .action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
  }
  
  :deep(.el-button--small) {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
  }
  
  /* 标签样式 */
  :deep(.el-tag) {
    border-radius: 6px;
    font-weight: 500;
    padding: 0 12px;
    height: 28px;
    line-height: 28px;
  }
  
  /* 弹窗样式优化 */
  :deep(.rescue-dialog .el-dialog) {
    border-radius: 12px;
  }
  
  :deep(.rescue-dialog .el-dialog__header) {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #e4e7ed;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin: 0;
  }
  
  :deep(.rescue-dialog .el-dialog__title) {
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
  }
  
  :deep(.rescue-dialog .el-dialog__headerbtn .el-dialog__close) {
    color: #ffffff;
    font-size: 20px;
  }
  
  :deep(.rescue-dialog .el-dialog__body) {
    padding: 28px 24px;
  }
  
  :deep(.rescue-dialog .el-dialog__footer) {
    padding: 16px 24px 24px;
    border-top: 1px solid #e4e7ed;
    background: #fafafa;
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
  
  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #303133;
    font-size: 14px;
  }
  
  :deep(.el-input__inner),
  :deep(.el-textarea__inner) {
    border-radius: 6px;
    border-color: #dcdfe6;
    transition: all 0.3s;
  }
  
  :deep(.el-input__inner:focus),
  :deep(.el-textarea__inner:focus) {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
  }
  
  /* 上传组件 */
  .upload-list {
    width: 100%;
  }
  
  .upload-tip {
    margin-top: 12px;
    color: #909399;
    font-size: 13px;
    line-height: 1.6;
  }
  
  :deep(.el-upload--picture-card) {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    border: 2px dashed #d9d9d9;
    transition: all 0.3s;
  }
  
  :deep(.el-upload--picture-card:hover) {
    border-color: #409eff;
    background: #f0f9ff;
  }
  
  :deep(.el-upload-list--picture-card .el-upload-list__item) {
    border-radius: 8px;
    overflow: hidden;
  }
  
  /* 预览对话框 */
  :deep(.preview-dialog .el-dialog) {
    border-radius: 12px;
  }
  
  :deep(.preview-dialog .el-dialog__body) {
    padding: 0;
  }
  
  .preview-container {
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
  }
  
  /* 工具栏 */
  .preview-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #2a2a2a;
    border-bottom: 1px solid #3a3a3a;
  }
  
  .toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .toolbar-right {
    display: flex;
    align-items: center;
  }
  
  .preview-counter {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
  }
  
  :deep(.preview-toolbar .el-button-group .el-button) {
    background: #3a3a3a;
    border-color: #4a4a4a;
    color: #ffffff;
  }
  
  :deep(.preview-toolbar .el-button-group .el-button:hover) {
    background: #4a4a4a;
    border-color: #5a5a5a;
  }
  
  :deep(.preview-toolbar .el-button-group .el-button:disabled) {
    background: #2a2a2a;
    border-color: #3a3a3a;
    color: #666666;
    opacity: 0.5;
  }
  
  /* 轮播容器 */
  .carousel-wrapper {
    background: #000;
  }
  
  /* 轮播项样式 - 确保容器不会裁剪内容 */
  :deep(.el-carousel__item) {
    overflow: visible !important;
    height: 70vh !important;
  }
  
  :deep(.el-carousel__container) {
    height: 70vh !important;
  }
  
  .carousel-image-wrapper {
    width: 100%;
    height: 100%;
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    overflow: auto;
    position: relative;
    padding: 20px;
    box-sizing: border-box;
  }
  
  /* 确保图片容器可以滚动查看完整内容 */
  .carousel-image-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  .carousel-image-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .carousel-image-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
  }
  
  .carousel-image-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
  }
  
  /* 缩放容器 - 自适应图片尺寸 */
  .image-zoom-container {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
    transform-origin: center center;
    width: fit-content;
    height: fit-content;
  }
  
  /* 图片样式 - 保持原始比例和尺寸，不裁剪 */
  .preview-image {
    width: auto !important;
    height: auto !important;
    max-width: calc(90vw - 200px) !important;
    max-height: calc(70vh - 40px) !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block;
    image-rendering: auto;
  }
  
  /* 轮播指示器样式 */
  :deep(.el-carousel__indicator) {
    padding: 8px;
  }
  
  :deep(.el-carousel__button) {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
  }
  
  :deep(.el-carousel__indicator.is-active .el-carousel__button) {
    background: #409eff;
  }
  
  :deep(.el-carousel__indicator) {
    padding: 8px;
  }
  
  :deep(.el-carousel__button) {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
  }
  
  :deep(.el-carousel__indicator.is-active .el-carousel__button) {
    background: #409eff;
  }
  
  /* 空状态 */
  :deep(.el-empty) {
    padding: 60px 0;
  }
  
  /* 响应式 */
  @media (max-width: 768px) {
    .rescue-container {
      padding: 10px;
    }
    
    :deep(.el-card__body) {
      padding: 20px;
    }
    
    .header {
      flex-direction: column;
      gap: 16px;
    }
    
    .header-content {
      width: 100%;
    }
    
    .page-title {
      font-size: 22px;
    }
    
    .subtitle {
      margin-left: 0;
    }
    
    :deep(.el-table) {
      font-size: 13px;
    }
    
    .description-cell {
      max-width: 150px;
    }
    
    :deep(.rescue-dialog .el-dialog) {
      width: 95% !important;
      margin: 5vh auto;
    }
  }
  </style>
  